import React, { useState, useEffect, useRef } from 'react';
import { SearchOutline, FilterOutline } from 'antd-mobile-icons';
import './index.less';
import Popup from 'antd-mobile/es/components/Popup';
import Space from 'antd-mobile/es/components/Space';
import Selector from 'antd-mobile/es/components/Selector';

import { apihook } from '../../../../hooks';
import axios from 'axios';
export default function (props) {
  const [state, setState] = useState();
  const inputRef = useRef(); // input 上的ref
  const [inputValue, setInputValue] = useState(''); // input 获取到的值
  const [selectTag, setSelectTag] = useState(1); //  选中的id
  let a = [];
  const [value, setValue] = useState([]);
  const [visible, setVisible] = useState(false); // 筛选 的显示 和 隐藏
  const [options, setOptions] = useState([
    { label: '西湖运营', value: '1', isShow: false },
    { label: '上城运营', value: '2', isShow: false },
    { label: '拱墅运营', value: '3', isShow: false },
    { label: '余杭运营', value: '4', isShow: false },
    { label: '滨江运营', value: '5', isShow: false },
    { label: '萧山运营', value: '6', isShow: false },
  ]); //  选中的 数据源
  const [value2, setValue2] = useState([]);

  const [initData, setInitData] = useState([]);
  const [page, setPage] = useState(1); // 当前页数
  const [allpage, setAllpage] = useState(0); // 总页数

  const handleTag = (item, index) => {
    // console.log('点击导师按钮 pgae的页码是：', page);
    document.documentElement.scrollTop = 0; // 点击以后回到顶部
    //  改变 高亮显示
    setSelectTag(item.id); //  这个赋值是 异步的
    let a = null;
    a = tag.map((i) => ({ ...i, ishow: item.id == i.id ? true : false }));
    setTag(a);
    setPage(1);
    initDataFn(item.id, 1, inputValue, value);
  };

  useEffect(() => {
    props.handleInput(inputValue);
    props.handleSelect(value);
    props.data.length > 0 && setInitData(props.data);
  });
  const handleBtnCheck = () => {
    // 点击搜索按钮
    setInputValue(inputRef.current.value);
    initDataFn(props.status, 1, inputRef.current.value, value);
  };

  const handleInputSelect = () => {
    // 打开多选框
    setVisible(true);
  };

  const handleInputValue = (input) => {
    setInputValue(input);
  };

  const handlecommit = () => {
    // 提交
    setVisible(false); // 关闭弹窗
    let username = inputValue;

    initDataFn(props.status, null, username, value);
    // setValue([]); // 提交完了以后重置  // 文字
    // setValue2([]); //  提交完了以后重置
  };

  const handlereset = () => {
    //  重置按钮
    setValue2([]);
  };

  const handleCheckbox = (arr, extend) => {
    // 选择 按钮
    a = extend.items.map((v) => {
      return v.label;
    });
    setValue(a);
    setValue2(arr);
  };

  const initDataFn = async (status = 1, pageNo = 1, username, tags) => {
    // let status = 1 // 讲师属性
    // let pageNo = 1 //  传入的页数
    // let username = ''  // 模糊搜索
    // let tags = ''   //  标签搜索
    let res = await apihook({
      status,
      pageNo,
      username,
      tags,
    });
    setInitData(res.data.data.List);
    setAllpage(Math.ceil(res.data.data.totalRecord / res.data.data.pageSize)); // 总页数
  };

  useState(() => {
    //initDataFn(); // 初始化 数据
  }, []);

  useEffect(() => {
    setTimeout(() => {
      const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          setPage((a) => {
            return a + 1;
          });
        }
      });
      observer.observe(document.querySelector('#loading'));
    }, 500);
  }, []);

  useEffect(() => {
    setPage(1);
    initDataFn(); // 初始化 数据
  }, [props.page, props.status]);

  useEffect(() => {
    if (page == 1) {
      return;
    }
    console.log(page, 'dsfsfsfsfsf');
    let status = props.status; // 讲师属性
    let pageNo = page; //  传入的页数
    let username = inputValue; // 模糊搜索
    let tags = value; //  标签搜索
    async function foo() {
      if (page <= allpage) {
        return await axios.get(
          `https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?statu=${status}&pageNo=${pageNo}&username=${username}&tags=${tags}`,
        );
      }
    }

    console.log(page, allpage, 'ddd');
    if (page <= allpage) {
      console.log('res', 'mmmmmmmmmmmmmmmm');
      foo()
        .then((res) => {
          console.log('res', 'mmmmmmmmmmmmmmmm');
          setInitData((a) => (a = initData.concat(res.data?.data?.List)));
        })
        .catch((err) => {
          console.log('err:', err);
        });
    }
  }, [page, allpage]);

  return (
    <div>
      {/* input 输入框 */}
      <div className="footer_input">
        <div className="footer_input_in">
          <SearchOutline className="icon" />
          <input
            onChange={(e) => {
              setInputValue(e.target.value);
            }}
            ref={inputRef}
          />
          <button onClick={handleBtnCheck} className="footer_sousuo">
            {' '}
            搜索{' '}
          </button>
        </div>
        <div onClick={handleInputSelect} className="footer_input_select">
          <div> 筛选 </div>
          <FilterOutline />
        </div>
      </div>

      {/* 筛选部分 */}
      <div>
        <Space direction="vertical">
          <>
            <Popup
              visible={visible}
              //模态框关闭
              onMaskClick={() => {
                setVisible(false);
              }}
              position="right"
              bodyStyle={{ minWidth: '60vw' }}
            >
              <div className="select_all">
                <div className="advantage"> 擅长方向 </div>
                <div className="Checkbox_box">
                  <Selector
                    columns={2}
                    options={options}
                    multiple={true}
                    value={value2}
                    onChange={(arr, extend) => handleCheckbox(arr, extend)}
                  />
                </div>
              </div>
              <div className="btn">
                <button className="btn1" onClick={handlecommit}>
                  提交
                </button>
                <button className="btn2" onClick={handlereset}>
                  重置
                </button>
              </div>
            </Popup>
          </>
        </Space>
      </div>

      {/* 底部 内容展示区域 */}
      <div className="footer_content">
        {initData.map((item, index) => {
          return (
            <div className="content_item" key={item.id}>
              <div className="content_top">
                <div>{item.img && <img src={item.img} />}</div>
                <div className="top_text">
                  <div> {item.username} </div>
                  <div> {item.position} </div>
                </div>
              </div>

              <div style={{ wordWrap: 'break-word', marginBottom: '10px' }}>
                {' '}
                {item.introduce}{' '}
              </div>
              <div>
                {item.tags.length > 0 &&
                  item.tags.map((i, index_i) => {
                    return (
                      <span key={i} className="span_item">
                        {' '}
                        {i}{' '}
                      </span>
                    );
                  })}
              </div>
            </div>
          );
        })}
      </div>

      <div id="loading"></div>
    </div>
  );
}
